import { useRequest, useUpdateEffect } from 'ahooks'
import dayjs from 'dayjs'
import { Badge, Button, Card, Progress, Space, Tag, theme, Tooltip } from 'antd'
import { CopyOutlined } from '@ant-design/icons'

import { useControllerRef } from '@/hooks/useAbortController'
import { handleCopy } from '@/utils/utils'
import { withDelayRequest } from '../utils'
import { apiGetWaybillInfo } from './apis'

const getWaybillInfo = withDelayRequest(apiGetWaybillInfo)

export const BaseInfo = ({ waybillNo, fbaId }: { waybillNo: string; fbaId: string | null }) => {
  const { token } = theme.useToken()

  const controllerRef = useControllerRef()
  const { loading, data, mutate, run } = useRequest(() => {
    mutate(undefined)
    controllerRef.current.abort()
    controllerRef.current = new AbortController()
    return getWaybillInfo(waybillNo, controllerRef.current.signal)
  })

  const {
    abnormalStatus,
    deliverDate,
    age,
    currentLogisticsNode: curr,
    currentLogisticsNodeEn,
    logisticsNodeList: list,
    logisticsNodeEnList,
    archiveFlag,
  } = data || {}
  const currIndex = list?.findIndex(v => v === curr) || -1
  const isError = abnormalStatus === -1 || abnormalStatus === 0

  useUpdateEffect(() => run(), [waybillNo])

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 16 }}>
        <Space style={{ flex: '1 1' }} size={2} direction="vertical">
          <Space size={20}>
            <b style={{ fontSize: 20 }}>{currentLogisticsNodeEn || '--'}</b>
            <Space size={0}>
              <Tooltip mouseEnterDelay={0.6} title={'FBABEE Shipment ID'}>
                <span style={{ fontSize: 20 }}>{waybillNo || '--'}</span>
              </Tooltip>
              <Button
                type="text"
                icon={<CopyOutlined />}
                disabled={!waybillNo}
                onClick={() => handleCopy(waybillNo, { isEn: true })}
              />
            </Space>
            <Space size={0}>
              <Tooltip mouseEnterDelay={0.6} title={'FBA Shipment ID'}>
                <span style={{ fontSize: 20 }}>{fbaId || '--'}</span>
              </Tooltip>
              <Button
                type="text"
                icon={<CopyOutlined />}
                disabled={!fbaId}
                onClick={() => handleCopy(fbaId, { isEn: true })}
              />
            </Space>
            {archiveFlag === 0 && isError && (
              <Badge
                color={abnormalStatus === -1 ? 'orange' : 'blue'}
                text={abnormalStatus === -1 ? 'Pending' : 'In progress'}
              />
            )}
            {archiveFlag === 1 && (
              <Tag>
                <Badge color={$CSS_VAR.statusDefault} text="Archived" />
              </Tag>
            )}
          </Space>
          <Space style={{ flex: 'none', color: token.colorTextTertiary }} size={12}>
            <span>{`Shipped On ${deliverDate ? dayjs(deliverDate).$formatSmart($F_YMD) : '--'}`}</span>
            <span>{`${age || '--'} Days`}</span>
          </Space>
        </Space>
      </div>

      <Card styles={{ body: { height: 88 } }} loading={loading}>
        <Space style={{ width: '100%' }} styles={{ item: { flex: '1 1' } }} size={8}>
          {list?.map((v, i) => (
            <Space key={v} style={{ width: '100%' }} size={4} direction="vertical">
              <Progress
                size="small"
                strokeColor={v === curr && isError ? token.colorError : token.blue}
                trailColor={v === curr && isError ? '#FED4D4' : '#CDD8FA'}
                percent={v === curr ? 50 : i > currIndex ? 0 : 100}
                showInfo={false}
              />
              <span>{logisticsNodeEnList?.[i] || '--'}</span>
            </Space>
          ))}
        </Space>
      </Card>
    </div>
  )
}
